<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
     .box{
         width: 700px;
         height: 400px;
         margin: 0 auto;
         font-size: 25px;
         border: 2px solid #333;
     }
     ul{
         padding: 0;
         margin: 0;
         list-style: none;
     }
     .graybox{
         width: 700px;
         height: 40px;
         margin: 0 auto;
         display: flex;
         color: white;
         background-color: #999;
     }
     .graybox li{
          margin: 0 20px;
          cursor: pointer;
     }
     .graybox-info{
          border: 1px solid #666;
          border-top: none;
          top: 50px;
          color: #aaa;
           display: none;
         position: absolute;
     }
     .graybox-info li{
         margin: 20px 0;
         cursor: pointer;
          
     }a{
         color: inherit;
         font-size: inherit;
         text-decoration: none;
     }
</style>
</head>
<body>
    <div class="box">
        <ul class="graybox">
            <li><a href="#">公司简介</a>
                <ul class="graybox-info">
                    <li>概况介绍</li>
                    <li>发展历史</li>
                    <li>公司实力</li>
                </ul>
            </li>
            <li><a href="#">产品介绍</a>
                <ul class="graybox-info">
                    <li>软件研发</li>
                    <li>软件教育</li>
                    <li>教育游资</li>
                </ul>
            </li>
            <li><a href="#">联系我们</a>
               <ul class="graybox-info">
                    <li>工资历史</li>
                    <li>联系方式</li>
                    <li>教育游资</li>
                </ul> 
            </li>
            <li><a href=#>人才招聘</a>
                <ul class="graybox-info">
                    <li>java招聘</li>
                    <li>html5招聘</li>
                    <li>PHP招聘</li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
</body>
</html>
<script>
   $('.graybox').children('li').each(function(index){
      $('.graybox').children('li') .eq(index).hover(function(){
              $('.graybox-info').eq(index).css('display','block')
          },function(){
                $('.graybox-info').eq(index).css('display','none')
          }) 
      })
      $('a').each(function(index){
          $('a').eq(index).hover(function(){
           $('a').eq(index).css('color','yellow').css('text-decoration','underline')
          },function(){
           $('a').eq(index).css('color','white').css('text-decoration','none')
          })
      })
        $('.graybox-info').find('li').each(function(index){
           $('.graybox-info').find('li').eq(index).hover(function(){
               
        $('.graybox-info').find('li').eq(index).css('text-decoration','underline')
        },function(){
          $('.graybox-info').find('li').eq(index).css('text-decoration','none')
        })
        })
        

</script>
